<<!DOCTYPE html> <html> <head>     <title>Click Effects Demo</title>     <meta
charset="utf-8"> </head>

<style type="text/css">
	a.btn{
		display: inline-block;
		margin: 20px;
		padding: 10px 20px;
		border:1px solid lightblue;

		box-shadow: 2px 6px 12px rgba(0,0,0,.4);
		text-align: center;
		text-decoration: none;
		border-radius: 4px;

		transition: transform .04s ease-out;
	}

	a.btn-hover{
		box-shadow: none;
		background-color: lightgrey;
		transform:scale(.90);
	}
</style>

<body>

<button>Button默认效果</button>

<a class="btn">按钮1</a>

<script type="text/javascript">
	
	document.querySelector('.btn').addEventListener('mousedown', function(){
		this.className="btn btn-hover";
	})
	document.querySelector('.btn').addEventListener('mouseup', function(){
		this.className="btn";
	})
	document.querySelector('.btn').addEventListener('mouseout', function(){
		this.className="btn";
	})
</script>
</body>
</html>